<style lang="scss">
  @import '../../../../assets/css/_variable';

  .head-portrait img {
    width: 3.25em;
    height: 3.25em;
    display: inline-block;
    border-radius: 50%;
    border: 0.125em solid #ffffff;
  }
</style>
<template>
  <div class="bg-color-light-black padding-normal" :data-url="dataUrl">
    <div class="align-center" @click.native="show()">
      <div>
        <span class="font-title color-white ">{{resume.student.realName}}</span>
        <!--TODO-->
        <span class="font-title color-white ">{{resume.student.id}}</span>
      </div>
      <div class="head-portrait margin-top-big">
        <img src="../../../../assets/img/vn.jpg" width="50px" height="50px">
      </div>
      <div class="font-small">
        <span class="color-success" v-if="resume.grade=='1'">高一</span>
        <span class="color-warning" v-if="resume.grade=='2'">高二</span>
        <span class="color-danger" v-if="resume.grade=='3'">高三</span>
        <span class="color-white" v-if="resume.grade>'3'">已毕业</span>
      </div>
      <div class="margin-top-normal">
        <el-tag type="gray">{{resume.school.name}}</el-tag>
        <el-tag type="gray">{{resume.tbClass.name}}</el-tag>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
  import {FakeResumes} from 'store/faker';
  import DataBox from './DataBox.vue';
  export default {

    data(){
      return {
        rawData: FakeResumes()[1]
      }
    },
    computed: {
      resume(){
        let resume = this.rawData;
        resume.grade = this.$tools.getGrade(this.rawData.student.gradeYear);
        return resume;
      },
      dataUrl(){
        let url = this.$store.state.app.statUrl + "StudentStatData/getStudentResume?studentId="
          + this.$store.state.app.loginState.serverStudentId;
        this.fetch
        return url;
      }
    },
    methods: {
      fetchData(url){
        this.$http.get(url)
          .then((response) => {
            if (response.data.success) {
              this.rawData = response.data.obj;
            }
          });
      }
    },
    components: {
      DataBox
    }
  };
</script>
